<template>
  <div>
    <el-container style="height:100vh; border: 1px solid #eee">
      <!-- 侧边栏 -->
      <el-aside :width="width" style="background-color: rgb(238, 241, 246);">
        <Aside style="height:100%;" :isCollapse="isCollapse" :isshow="isshow"></Aside>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <Header @doCollapse="Collapse" :icon="icon" :user="user"></Header>
        </el-header>
        <!-- 内容主题部分 -->
        <el-main>
          <!-- 表示当前manage的子路由全部在这里显示 -->
          <router-view @refresUser="getUser"></router-view>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
import Aside from '@/components/Aside';
import Header from '@/components/Header';

export default {
  name: "home",
  data () {
    return {
      isCollapse: false,
      width: "200px",
      icon: "el-icon-s-fold",
      isshow: true,
      user: {}
    };
  },
  created () {
    //一开始就从后台获取最新的数据
    this.getUser()
  },
  methods: {
    getUser () {
      let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""

      this.request.get("/user/username/" + username).then(res => {
        //重新赋值最新的user数据
        this.user = res.data
      })
    },
    Collapse () {
      if (this.isCollapse != false) {
        this.isCollapse = false;
        this.width = "200px";
        this.icon = "el-icon-s-fold";
        this.isshow = true;
      }
      else {
        this.isCollapse = true;
        this.width = "64px";
        this.icon = "el-icon-s-unfold";
        this.isshow = false;
      }
    },

  },
  components: {
    Aside,
    Header
  }
};
</script>

<style lang="less" scoped>
.el-header {
  position: relative;
  background-color: #fff;
  color: #333;
  line-height: 60px;
  border-bottom: 2px solid #eee;
}

.el-aside {
  color: #333;
  transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -o-transition: width 0.25s;
}
</style>